import React from 'react';
import styled from './orderList.module.css';
import Colgroup from './Colgroup';
import { IOrderItem } from '../types';
import { OrderOperateTradeMap, OrderStatusTradeMap } from '@/config/order.config';
import CutDown from './cutDown';
export default function orderItem({
    item,
    orderTimeout,
    goPay,
}: {
    item: IOrderItem;
    orderTimeout: () => void;
    goPay: (id: string, total_price: number) => void;
}) {
    return (
        <div className={styled.orderItem}>
            <table>
                <Colgroup></Colgroup>
                <tbody className={styled.header}>
                    <tr>
                        <td style={{ textAlign: 'left' }}>
                            <label className={styled.orderOperate}>
                                <input type="checkbox" style={{ marginRight: '5px' }} />
                                <span className={styled.date}>
                                    {new Date(item.ceate_time).toLocaleDateString()}
                                </span>
                            </label>
                            <span className={styled.orderNo}>OrderNo:{item.id}</span>
                        </td>
                        <td colSpan={2}>
                            <a href="javascript;" className={styled.goodName}></a>
                        </td>
                        <td>Call Me</td>
                        <td colSpan={3}>
                            <div style={{ display: 'flex', justifyContent: 'center' }}>
                                <CutDown
                                    orderTimeout={orderTimeout}
                                    expirationDate={item.expire_time}
                                ></CutDown>
                                <div style={{ marginLeft: '10px' }}>
                                    {OrderOperateTradeMap[item.status] === 'Wait For Payment' ? (
                                        <a onClick={() => goPay(item.id, item.total_price)}>
                                            Payment
                                        </a>
                                    ) : null}
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
                {item.orderGood.map((good, index) => {
                    return (
                        <tbody className={styled.orderBody}>
                            <tr>
                                <td style={{ borderLeft: '1px solid #daf3ff' }}>
                                    <div className={styled.good}>
                                        <div>
                                            <img src={'https://' + good.good.media?.file} />
                                        </div>
                                        <div className={styled.info}>
                                            <p className={styled.title}>
                                                <span>{good.good.name}</span>
                                            </p>
                                            <p className={styled.detail}>
                                                <span>{good.good.description}</span>
                                            </p>
                                            <p>
                                                <span className={styled.tag}>Security Card</span>
                                            </p>
                                            <p className={styled.date}></p>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div className={styled.price}>
                                        {Number(good.good.price) > 0
                                            ? `$${good.good.price}`
                                            : `$${good.good.oldPrice}`}
                                    </div>
                                </td>
                                <td>{good.num}</td>
                                <td>
                                    <div>
                                        <a href="javascript;">Refund</a>
                                    </div>
                                    <div>
                                        <a href="javascript;"></a>
                                    </div>
                                </td>
                                <td>
                                    <div className={styled.realPrice}>
                                        {Number(good.good.price) > 0
                                            ? `$${good.good.price}`
                                            : `$${good.good.oldPrice}`}
                                    </div>
                                    <div></div>
                                    <div className={styled.orderType}></div>
                                </td>
                                <td>
                                    <div className={styled.orderStatus}>
                                        <span>{OrderStatusTradeMap[item.status]}</span>
                                    </div>
                                    <div className={styled.orderDetail}>
                                        <a href="javascript;">Order Details</a>
                                    </div>
                                </td>
                                <td>
                                    <div>{OrderOperateTradeMap[item.status]}</div>
                                </td>
                            </tr>
                        </tbody>
                    );
                })}
            </table>
        </div>
    );
}
